<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{ report_name }}</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .m-b-5{
      margin-bottom: 5px;
    }
    /* 样式定义 */
    .content{
      background: #0a1532;
      color: #fff;
      padding:10px;
      padding-bottom: 10px;
    }
    .bg-border{
      background: #0c1d40;
      border-radius: 5px;
    }
    .content h1{
      text-align: center;
      font-family: cursive;
      font-style: italic;
    }
    .content h5{
      padding: 10px;
      text-align: center;
      font-family: cursive;
      font-style: italic;
    }
    .content h2{
      text-align: center;
      padding: 10px;
      font-size: 18px;
    }
    .chart{
      width: 100%;
      height: 400px;
    }
    .content ul{
      padding: 10px;
    }
    .content ul p{
      color: #3eadff;
      font-weight: bold;
    }
    .content ul li{
      margin: 5px 0;
      color: #ccc;
      font-size: 14px;
    }
    .thought li{
      color: #d3d3d3 !important;
      font-weight: bold;
    }
  </style>
  <!-- 引入 ECharts -->
</head>
<body>
  <div class="content">
    <h1>{{ report_name }}</h1>
    <h5>----Powered by {{report_author}}</h5>

        <ul class="m-b-5 bg-border thought">
          <p>分析思路</p>
          {% for thought in report_thought %}
            <li>{{ thought }}</li>
          {% endfor %}
        </ul>
  {% for question_data in report_question %}
    <div class="question-section">
      <h2 class="m-b-5 bg-border">{{ question_data['question']['report_name'] }}</h2>

      <ul class="m-b-5 bg-border">
        <p>【数据解读】</p>
        {% for answer_item in question_data['answer'] %}
          <li><strong>{{ answer_item['analysis_item'] }}：</strong>{{ answer_item['description'] }} </li>
        {% endfor %}
      </ul>

      <div id="chart{{ loop.index }}" class="chart m-b-5 bg-border"></div>
      <script type="text/javascript">
        var chart{{ loop.index }} = echarts.init(document.getElementById('chart{{ loop.index }}'),"dark");
        var option{{ loop.index }} = {{ question_data['echart_code'] | safe }};
        chart{{ loop.index }}.setOption(option{{ loop.index }});
      </script>
    </div>
  {% endfor %}

  <div class="report-summary">
    <h2 class="m-b-5 bg-border">报告总结</h2>
    <ul class="m-b-5 bg-border">
      {% for summary in report_analyst %}
        <li><strong>{{ summary['analysis_item'] }}：</strong>{{ summary['description'] }} </li>
      {% endfor %}
    </ul>
  </div>
  </div>
</body>
</html>
